<template>
	<view class="content">
		<view class="pie-content">
			<view id="pieChart" style="width: 600px;height: 500px;"></view>
		</view>
		<button @click="tiaozhuan">展示柱状图</button>
	</view>
</template>

<script>
	//npm i echarts
	import * as echarts from "echarts"
	export default {
		data() {
			return {
				option2: {
					legend: {},
					tooltip: {
						trigger: 'axis',//多个系列数据，触发类型坐标轴
						showContent: false
					},
					dataset: {
						source: [
							['product', '2012', '2013', '2014', '2015', '2016', '2017'],
							['Milk Tea', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
							['Matcha Latte', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
							['Cheese Cocoa', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
							['Walnut Brownie', 25.2, 37.1, 41.2, 18, 33.9, 49.1]
						]
					},
					xAxis: {
						type: 'category',//类目轴;'value' 数值轴
					},
					yAxis: {
						gridIndex: 0
					},
					grid: {
						top: '55%',//grid 组件离容器上侧的距离。
					},
					series: [{
							type: 'line',
							smooth: false,//平滑曲线显示。
							seriesLayoutBy: 'row',//系列“排布”到 dataset 的行还是列上
							emphasis: {
								focus: 'series',//聚焦当前高亮的数据所在的系列的所有图形。'self' 只聚焦（不淡出）当前高亮的数据的图形。
							}
						},
						{
							type: 'line',
							smooth: true,
							seriesLayoutBy: 'row',
							emphasis: {
								focus: 'series'
							}
						},
						{
							type: 'line',
							smooth: true,
							seriesLayoutBy: 'row',
							emphasis: {
								focus: 'series'
							}
						},
						{
							type: 'line',
							smooth: true,
							seriesLayoutBy: 'row',
							emphasis: {
								focus: 'series'
							}
						},
						{
							type: 'pie',
							id: 'pie',
							radius: '30%',
							center: ['50%', '25%'],
							emphasis: {
								focus: 'self'
							},
							label: {
								formatter: '{b}: {@2012} ({d}%)'
							},
							encode: {
								itemName: 'product',
								value: '2012',
								tooltip: '2012'
							}
						}
					]

				},				
			}
		},
		mounted() {
			this.initChart()
		},
		methods: {
			initChart() {
				var chartColumn2 = echarts.init(document.getElementById('pieChart'), 'dark')
				chartColumn2.showLoading()
				chartColumn2.setOption(this.option2)
				chartColumn2.hideLoading()

			},
			tiaozhuan() {
				uni.navigateTo({
					url: './index'
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		/* flex-wrap: wrap; */
	}

	.pie-content {
		background: black;
		color: white;
	}

	.dynamic-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.show-item {
		font-size: 30px;
	}

	.show-text {
		font-size: 18px;
	}
</style>
